<template>
  <div>
      <!-- 顶部 -->
    <div class='head'>
         <div class='top'> 
          <div class='top_left'> 
           <span class='icon_img'>南京市<i class='ca'></i></span> 
          </div>
          <div class='icon'>
          <span class='icon_tell'></span>
          <span class='icon_search'></span>
          </div>
         </div>
         <div class='search'>
            <li v-for="list in info" :key="list.id">
            <p class='search_p
            '><i class='icon_search2'></i>{{list.search_info}}</p>
            </li>
         </div>
          <div class='search-info'>
            <li v-for="list in infos" :key="list.id">
            <p>{{list.search_infos}}</p>
            </li>
          </div>
      </div>
      <!-- 商品信息栏 -->
    <ul id='goods-info'>
        <li v-for="list in ctgLists" :key="list.id" class='goods-info-list'>
          <img :src='list.imgsrc' alt=''>
          <p>{{list.title}}</p>
        </li>
      </ul>
      <!-- 商品信息栏结束 -->
      <!-- 滑动部分开始 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src='/static/swipe/1.png'></div>
        <div class="swiper-slide"><img src='/static/swipe/2.png'></div>
        <div class="swiper-slide"><img src='/static/swipe/3.png'></div>
        <div class="swiper-slide"><img src='/static/swipe/4.png'></div>
        <div class="swiper-slide"><img src='/static/swipe/5.png'></div>
        <div class="swiper-slide"><img src='/static/swipe/6.jpg'></div>
        <div class="swiper-slide"><img src='/static/swipe/7.jpg'></div>
       </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 商品推荐 -->
    <div class="goods_promote">
      <div class="goods_promote_top">
        <li><img src='/static/p_1.png'></li>
        <li><img src='/static/p_2.jpg'></li>
      </div>
      <div class="goods_promote_bottom">
        <li v-for="list in goodslists" :key="list.id" class='goods_promote_1' >
          <h3>{{list.atitle}}</h3>
           <p>{{list.btitle}}</p>
          <img :src='list.imgsrc' alt=''>
        </li>
      </div>
    </div>
    <!-- 秒杀 -->
    <div class='de'>
      <div class='de_top'>
        <img src='/static/seckill-title.png'>
        <router-link to="" style="text-decoration:none;">更多</router-link>
      </div>
      <div class='de_scroll'>
        <li v-for="list in delists" :key="list.id" class='goods-info-lists'>
          <img :src='list.imgsrc' alt=''>
          <p class='goods_info'>11{{list.desc}}</p>
          <p class='bprice'>￥{{list.bprice}}</p>
          <p class='aprice'>￥{{list.aprice}}</p>
        </li>
      </div>
      <div class='goods_pro'>
        <img src='/static/pro1.jpg'>
        <img src='/static/pro2.png'>
      </div>
    </div>
    <!-- shoplist -->
    <div class='shop'>
      <div class='nearby_shop'>
        <span>附近的店铺</span>
      </div>
      <ul v-infinite-scroll="loadMore" :infinite-scroll-disabled="flag" infinite-scroll-distance="10" class='shop_li_box'>
        <li v-for='list in shoplists' :key='list.id' class='shop_li'>
          <div class='shop_li_inbox'>
          <div class='shop_left'><img :src='list.imgsrc' alt=''></div>
          <div class='shop_right'>
            <div class='shop_right_top'>
              <div class='shop_rtl'>
                <h2><router-link :to="{name:'shop',params:{shopid:list.id}}">{{list.title}}</router-link></h2>
                <p class='star'>
                <span class='stary'>{{list.star}} {{list.star_score}}</span>
                <span class='shop_sale'>月售{{list.salesum}}{{list.bprice}}</span>
                </p>
                <p class='shop_sales'>
               起送{{list.ms}} | 基础运费{{list.md}}
                </p>
              </div>
              <div class='shop_rtf'>
                <p>{{list.dm}}分钟 | {{list.dd}}米</p>
                <span class='diliver'>达达专送</span>
              </div>
            </div>
            <div class='shop_right_bottom'>
              <ul class='shop_right_cc cc_add'>
                <span class='arrow' @click="show"></span>
                <li  v-for='(yhqq,index) in list.yhqq' :key="'yhqq'+index" class='yhq'>
                <span class='coupon'>{{yhqq.type}}</span>
                <span class='y_title'>{{yhqq.title}}</span>
                </li>
                <li  v-for='(yhq,index) in list.yhq' :key="'yhj'+index" class='yhq'>
                <span class='discount' >{{yhq.type}}</span>
                <span class='y_title'>{{yhq.title}}</span>
                </li>
              </ul>
              <li class='nshop'>
                  <span class='nearshop'></span>
                  <span>附近还有 {{list.dnum}}家</span>
                </li>
            </div>
          </div>
          </div>
        </li>
      </ul>
     </div>
    <!-- <div class='last'></div> -->
  </div>
</template>
<script>
import $ from "jquery";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
  data() {
    return {
      info: [],
      infos: [],
      ctgLists: [],
      goodslists: [],
      delists: [],
      flag: false,
      shoplists: []
    };
  },
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: true,
      direction: "horizontal",
      loop: true,
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination"
      }
      // 如果需要前进后退按钮
    });
  },
  created() {
    this.getCtgList();
    this.getInfos();
    this.getInfo();
    this.goodsLists();
    this.deLists();
    this.shopLists();
    $(window).scroll(() => {
      let st = $(document).scrollTop() / 100;
      if (st > 1) {
        st = 1;
        $(".icon").addClass("icon-end");
        return;
      } else {
        $(".icon").removeClass("icon-end");
      }
      $(".top").css("background", "rgba(81, 210, 90," + st + ")");
      $(".head").css("background", "rgba(81, 210, 90," + (1 - st) + ")");
    });
  },
  methods: {
    getCtgList() {
      $.get(this.apiurl + "/ctg/list").done(result => {
        this.ctgLists = result.data;
      });
    },
    getInfo() {
      $.get(this.apiurl + "/ctg/info").done(result => {
        this.info = result.data;
      });
    },
    getInfos() {
      $.get(this.apiurl + "/ctg/infos").done(result => {
        this.infos = result.data;
      });
    },
    goodsLists() {
      $.get(this.apiurl + "/ctg/goodsLists").done(result => {
        this.goodslists = result.data;
      });
    },
    deLists() {
      $.get(this.apiurl + "/ctg/deLists").done(result => {
        this.delists = result.data;
      });
    },
    //事件加载
    loadMore() {
      this.flag = true;
      setTimeout(() => {
        this.shopLists();
        this.flag = false;
      }, 1000);
    },
    //店铺加载
    shopLists() {
      $.get(this.apiurl + "/ctg/shoplists").done(result => {
        this.shoplists = this.shoplists.concat(result.data);
      });
    },
    //优惠券箭头展示伸缩
    show:function(){
      $(event.target).toggleClass("arrow2");
      $(event.target).parent().toggleClass('cc_add')
    }
  }
};

</script>
<style scoped>
/* 顶部 */
.head {
  height: 6.75rem;
  background: rgba(81, 210, 90, 1);
  display: flex;
  position: relative;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.top {
  height: 3.18rem;
  position: fixed;
  width: 100%;
  background: rgba(81, 210, 90, 0.4);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 100;
}
.icon_img {
  background: url(/static/location.png) no-repeat 0;
  background-size: 0.8rem;
  margin: 0rem 0rem 0rem 0.8rem;
}
.top_left > span {
  display: inline-block;
  line-height: 2.8rem;
  font-size: 1rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 6.6rem;
  text-align: center;
}
.ca {
  background: url(/static/sanjiao.png) no-repeat 0;
  display: inline-block;
  background-size: 0.56rem;
  width: 1rem;
  height: 1rem;
  margin-left: 0.2rem;
  margin-bottom: -0.12rem;
}
.icon_search,
.icon_tell,
.icon_search2 {
  display: inline-block;
  width: 2rem;
  height: 3rem;
}
.icon_search {
  background: url(/static/icon_search.png) no-repeat 0;
  background-size: 1.28rem;
}
.icon_tell {
  background: url(/static/icon_tell.png) no-repeat 0;
  background-size: 1.28rem;
}
.top .icon {
  line-height: 2rem;
  color: white;
  float: right;
  margin-right: -2rem;
}
.top .icon-end {
  margin-right: 0;
  transition: 0.5s;
}
.search {
  width: 95%;
  background: #fff;
  border-radius: 0.96rem;
  height: 2.2rem;
  line-height: 2rem;
  margin: 3rem auto 0;
  display: flex;
  justify-content: center;
  display: wrap;
}
.search_p {
  font-size: 0.88rem;
  color: #999;
  margin-top: -0.4rem;
}
.icon_search2 {
  background: url(/static/icon_search2.png) no-repeat 0.6rem 1rem;
  background-size: 0.92rem;
  height: 1.8rem;
}
.search > li {
  width: 80%;
}
.search-info {
  display: flex;
  width: 80%;
  margin: auto;
}
.search-info > li {
  font-size: 0.76rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.5rem;
  width: 20%;
}
/* 商品信息栏 */
#goods-info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
li {
  margin-bottom: 1rem;
  /* width: 20%; */
  text-align: center;
  font-size: 0.76rem;
  color: #333;
}
.goods-info-list > img {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.4rem;
  border-radius: 2.5rem;
}
.goods-info-list {
  width: 20%;
}
p {
  margin: 0;
}

/* 商品信息栏结束 */
/* 滚动条设置 */
.swiper-container {
  width: 95%;
}
.swiper-slide > img {
  width: 100%;
  height: auto;
}
/* 推荐产品 */
.goods_promote {
  width: 95%;
  margin: 1rem auto 0;
}
.goods_promote_top {
  display: flex;
}
.goods_promote_top > li {
  width: 49%;
}
.goods_promote_top > li > img {
  width: 100%;
}
.goods_promote_top > li:nth-child(1) {
  margin-right: 2%;
}
.goods_promote_bottom {
  display: flex;
  justify-content: space-between;
}
.goods_promote_1 {
  width: 24%;
  background: #fbfbfb;
}
.goods_promote_1 > img {
  width: 72%;
  margin: 0.8rem auto;
}
.goods_promote_1 > h3 {
  margin-top: 0.82rem;
  color: #333333;
  font-size: 0.88rem;
  font-weight: normal;
  font-style: normal;
}
.goods_promote_1 > p {
  margin-top: 0.3125rem;
  font-size: 0.75rem;
  color: #ff5757;
  display: block;
  line-height: 0.75rem;
}
.de {
  width: 95%;
  margin: auto;
}
.de_top {
  display: flex;
  justify-content: space-between;
}
.de_top > img {
  height: 1.25rem;
  width: auto;
}
.de_top > a {
  color: #ff5757;
  font-size: 0.75rem;
  background: url(/static/seckill-right.png) center right no-repeat;
  background-size: auto 0.75rem;
  padding-right: 0.625rem;
  margin: auto 0;
}
.de_scroll {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  text-align: center;
}
.goods-info-lists {
  width: 20%;
  position: relative;
  margin-right: 0.8rem;
  margin-top: 0.5rem;
}
.goods_info {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 87, 87, 0.6);
  color: white;
  border-radius: 0.625rem;
  font-size: 0.625rem;
  width: 90%;
  z-index: 150;
  padding: 0.1rem 0.5rem;
}
.goods-info-lists > img {
  width: 100%;
}
.bprice {
  font-size: 1rem;
  font-weight: bold;
  color: #ff5757;
}
.aprice {
  color: #999;
  text-decoration: line-through;
}
.goods_pro > img {
  width: 100%;
}
.goods_pro > img:nth-child(2) {
  margin: 1rem 0;
}
/* nearby shop */
.nearby_shop {
  width: 60%;
  margin: 0rem auto 1rem;
  text-align: center;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  background-color: #fff;
}
.nearby_shop:before {
  content: "";
  height: 0.0624rem;
  width: 4rem;
  border-top: 0.0624rem solid #333;
  position: absolute;
  top: 50%;
  display: inline-block;
  left: 0;
}
.nearby_shop:after {
  content: "";
  height: 0.0624rem;
  width: 4rem;
  border-top: 0.0624rem solid #333;
  position: absolute;
  top: 50%;
  display: inline-block;
  right: 0;
}
.nearby_shop > span {
  font-size: 1.0625rem;
  font-weight: bold;
  color: #333;
}
/* shoplist */
.shop_li_box {
  width: 100%;
  background-color: #f4f4f4;
}
.shop_li {
  width: 100%;
  background: #fff;
  border-top: 0.12rem solid #f4f4f4;
  margin-bottom: 0;
}
.shop_li_inbox {
  display: flex;
  width: 95%;
  margin: 0.96rem auto 0;
}
.shop_left {
  width: 18%;
  height: 18%;
  border: 0.1rem solid #f4f4f4;
}
.shop_left > img {
  width: 100%;
  height: auto;
}
.shop_right {
  width: 80%;
  margin-left: 1rem;
}
.shop_right_top {
  display: flex;
}
.shop_rtl {
  width: 70%;
}
.shop_rtl > h2 {
  font-size: 0.94rem;
  font-weight: normal;
  font-style: normal;
  line-height: 0;
  margin-bottom: 0.8rem;
}
.coupon {
  background: #ff6c57;
  color: #ffffff;
  border-radius: 0.125rem;
}
.discount {
  background: #5fbc65;
  color: #ffffff;
  border-radius: 0.125rem;
}
.nearshop {
  background: url(/static/index_moreStore.png) center bottom no-repeat;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-size: 1rem;
  margin-left: 0.25rem;
}
.yhq,
.yhqq,
.shop_right,
.nshop {
  text-align: left;
}
.nshop {
  color: #666;
  font-size: 0.75rem;
  display: inline-block;
  width: 100%;
}
.y_title {
  font-size: 0.625rem;
  color: #999999;
}
.coupon,
.discount {
  padding: 0 0.2rem;
  font-size: 0.625rem;
}
.shop_rtf {
  color: #999;
  font-size: 0.625rem;
  margin-top: 1rem;
  position: relative;
  width: 30%;
}
.diliver {
  border: 1px solid #16a9ff;
  color: #16a9ff;
  padding: 2px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 2rem;
  display: inline-block;
}
.shop_rtf > p {
  line-height: 2rem;
  position: absolute;
  right: 0;
}
.stary {
  font-size: 0.625rem;
  color: #ffb128;
}
.star,
.shop_sale,
.shop_sales {
  font-size: 0.75rem;
  color: #999;
  line-height: 1rem;
}
.yhq {
  margin-bottom: 0.6rem;
}
.shop_sales {
  line-height: 2rem;
}
.shop_right_cc:before,
.nshop:before {
  content: "";
  height: 0.0625rem;
  width: 100%;
  border-top: 0.0625rem dotted #cccccc;
  display: inline-block;
  padding-top: 0.2rem;
}
.shop_right_cc {
  position: relative;
}
.cc_add {
  overflow: hidden;
  height: 4rem;
}
.arrow {
  position: absolute;
  display: inline-block;
  width: 1rem;
  height: 0.8rem;
  top: 1rem;
  right: 0rem;
  background: url(/static/index.png) no-repeat;
  background-position: -0.21rem -11.5rem;
  background-size: 1.25rem 12.5rem;
}
.arrow2 {
  background: url(/static/index.png) no-repeat;
  background-position: -0.21rem -10rem;
  background-size: 1.25rem 12.5rem;
}
/* 方便看图 */
.last {
  margin-bottom: 40rem;
}
</style>
